<template>
  <div class="dashboard-container">
    <div class="total-container">
      <el-card class="total" v-for="item in totals" :key="item.name" :style="{ borderLeftColor: item.color, borderRightColor: item.color }">
        <div class="title">{{ item.name }}</div>
        <div>
          <div class="value">{{ item.total }}</div>
          <div class="bg-image">
            <i class="el-icon-s-data" :style="{ color: item.color }"></i>
          </div>
          <div class="inc">
            <div class="inc-title">最近30天新增</div>
            <div class="inc-value">{{ item.incremental }}条</div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="chart-container">
      <el-card class="box-card" :style="{ width: 'style_width' in item ? item.style_width : '30%' }" v-for="item in chartList" :key="item.title.text">
        <v-chart class="chart" :options="item" :ref="item.id" />
      </el-card>
    </div>
    <div></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Index',
  computed: {
    ...mapGetters(['name']),
  },
  data() {
    return {
      totals: [],
      chartList: [
        {
          id: 'chartExamCategory',
          title: {
            text: '试题分类统计',
            left: 'center',
            right: 'center',
          },
          tooltip: {
            trigger: 'item',
          },
          series: [
            {
              radius: ['40%', '70%'],
              type: 'pie',
              avoidLabelOverlap: true,
              label: {
                show: false,
              },
              labelLine: {
                //删除指示线
                show: false,
              },
              data: [],
            },
          ],
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
        {
          id: 'chartPostDistrict',
          title: {
            text: '岗位地区分布',
            left: 'center',
            right: 'center',
          },
          tooltip: {
            trigger: 'item',
          },
          series: [
            {
              radius: ['40%', '70%'],
              type: 'pie',
              avoidLabelOverlap: true,
              label: {
                show: false,
              },
              labelLine: {
                //删除指示线
                show: false,
              },
              data: [],
            },
          ],
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },

        //课程分类
        {
          id: 'chartCourseCategory',
          title: {
            text: '课程分类统计',
            left: 'center',
            right: 'center',
          },
          tooltip: {
            trigger: 'item',
          },
          series: [
            {
              radius: ['40%', '70%'],
              type: 'pie',
              avoidLabelOverlap: true,
              label: {
                show: false,
              },
              labelLine: {
                //删除指示线
                show: false,
              },
              data: [],
            },
          ],
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
        //折线图
        {
          id: 'chartPostIncrease',
          style_width: '100%',
          title: {
            text: '岗位近30天增长趋势',
            left: 'center',
            right: 'center',
          },
          xAxis: {
            data: [],
          },
          tooltip: {
            trigger: 'item',
          },
          yAxis: {},
          series: [
            {
              data: [],
              type: 'line',
              label: {
                show: true,
                position: 'bottom',
                textStyle: {
                  fontSize: 15,
                },
              },
            },
          ],
        },
      ],
    }
  },
  created() {
    this.sumStatisticsExam()
    this.sumStatisticsPost()
    this.postStatisticsDistrict()
    this.sumStatisticsExamType()
    this.sumStatisticsCourse()
    this.sumStatisticsCourseType()
    this.distributionPostForDistrict()
  },
  methods: {
    // 试题总数统计
    sumStatisticsExam() {
      this.$store.dispatch('statistics/sumStatisticsExam').then((response) => {
        this.totals.push(...response.data)
      })
    },
    // 岗位总数统计
    sumStatisticsPost() {
      this.$store.dispatch('statistics/sumStatisticsPost').then((response) => {
        this.totals.push(...response.data)
      })
    },
    // 试题分类统计
    sumStatisticsExamType() {
      this.$store.dispatch('statistics/sumStatisticsExamType').then((response) => {
        this.chartList[0].series[0].data = response.data
      })
    },

    // 课程总数
    sumStatisticsCourse() {
      this.$store.dispatch('statistics/sumStatisticsCourse').then((response) => {
        this.totals.push(...response.data)
      })
    },
    // 课程分类统计
    sumStatisticsCourseType() {
      this.$store.dispatch('statistics/sumStatisticsCourseType').then((response) => {
        this.chartList[2].series[0].data = response.data
      })
    },
    // 岗位分布统计
    postStatisticsDistrict() {
      this.$store.dispatch('statistics/postStatisticsDistrict').then((response) => {
        this.chartList[1].series[0].data = response.data
      })
    },
    // 岗位分布
    distributionPostForDistrict() {
      this.$store.dispatch('statistics/statisticsPostTrend').then((response) => {
        var { xAxis, data, title } = response.data
        this.chartList[3].xAxis.data = xAxis
        this.chartList[3].series[0].data = data
        this.chartList[3].title.text = title
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.total-container,
.chart-container {
  width: 100%;
  height: 20rem;
}
.total,
.box-card {
  margin: 0.5%;
}
.total {
  border-width: 0 10px !important;
  width: 18%;
  float: left;
  .title {
    color: darkgray;
  }
  .value {
    width: 30%;
    font-size: 30px;
    color: #00bc12;
    float: left;
  }
  .bg-image {
    width: 70%;
    float: left;
    i {
      font-size: 60px;
    }
  }
  .inc {
    margin-top: 10%;
    .inc-title {
      float: left;
    }

    .inc-value {
      color: #ff4c00;
      float: left;
    }
  }
}
.box-card {
  width: 30%;
  float: left;
  .chart {
    width: 100%;
  }
}
</style>
